<template>
	<div style="width: 100%;height: 86vh;">
		<div style="height: 10%;">
			<div style="display: flex;height: 50%;">
				<el-input v-model="searchParam.deptName" size="mini" clearable style="width: 15%;" placeHolder="企业名称" />
				<el-input v-model="searchParam.cheliangpaizhao" size="mini" clearable
					style="width: 10%;margin-left: 8px;" placeHolder="车牌" />
				<el-input v-model="searchParam.zongduanid" size="mini" clearable style="width: 10%;margin-left: 8px;"
					placeHolder="SIM卡号" />
			</div>
			<div style="display: flex;height: 40%;">
				<el-button size="mini" type="primary" @click="search" icon="el-icon-search">查询</el-button>
				<el-button size="mini" type="success" icon="el-icon-plus" @click="addCl">添加</el-button>
				<el-button size="mini" type="warning" icon="el-icon-edit" @click="editCl">编辑</el-button>
				<el-button size="mini" type="danger" icon="el-icon-delete" @click="delCl">删除</el-button>
			</div>
		</div>

		<div style="height: 90%;">
			<el-table :data="tableData" border style="width: 100%" height="90%" v-loading="loading"
				element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)" highlight-current-row @row-click="selectRow">
				<el-table-column prop="deptName" label="组织机构" width="200" header-align="center" fixed>
				</el-table-column>
				<el-table-column prop="cheliangpaizhao" label="车牌号" width="120" header-align="center" fixed>
				</el-table-column>
				<el-table-column prop="chepaiyanse" label="车牌颜色" width="100" header-align="center">
				</el-table-column>
				<el-table-column prop="shiyongxingzhi" label="车辆类型" width="120" header-align="center"></el-table-column>
				<el-table-column prop="zongduanid" label="真实SIM卡号" width="150" header-align="center">
				</el-table-column>
				<el-table-column prop="cheliangzhuangtai" label="运营状态" width="80" header-align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.cheliangzhuangtai===0">营运</span>
						<span v-if="scope.row.cheliangzhuangtai===1">停运</span>
						<span v-if="scope.row.cheliangzhuangtai===2">报废</span>
						<span v-if="scope.row.cheliangzhuangtai===3">注销</span>
					</template>
				</el-table-column>
				<el-table-column prop="platformconnectiontype" label="车辆接入方式" width="120" header-align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.platformconnectiontype==='1'">直连</span>
						<span v-if="scope.row.platformconnectiontype==='2'">转发</span>
					</template>
				</el-table-column>
				<el-table-column prop="runStatus" label="车辆状态" width="100" header-align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.runStatus==='行驶'" size="mini">行驶</el-tag>
						<el-tag type="warning" v-if="scope.row.runStatus==='停车'" size="mini">停车</el-tag>
						<el-tag type="danger" v-if="scope.row.runStatus==='熄火'" size="mini">熄火</el-tag>
						<el-tag type="info" v-if="scope.row.runStatus==='从未上线'" size="mini">从未上线</el-tag>
						<el-tag type="info" v-if="scope.row.runStatus==='离线'" effect="dark" size="mini">离线</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="zhongduanleixing" label="终端类型" width="120" header-align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.zhongduanleixing===0">主动安全设备</span>
						<span v-if="scope.row.zhongduanleixing===1">2G设备</span>
					</template>
				</el-table-column>
				<el-table-column prop="terminalprotocoltype" label="终端协议类型" width="120" header-align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.terminalprotocoltype==='2011'">JTT808-2011</span>
						<span v-if="scope.row.terminalprotocoltype==='2013'">JTT808-2013</span>
						<span v-if="scope.row.terminalprotocoltype==='2019'">JTT808-2019</span>
						<span v-if="scope.row.terminalprotocoltype===null">JTT808-2013</span>
					</template>
				</el-table-column>
				<el-table-column prop="carowneraddress" label="终端地方标准" width="120" header-align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.carowneraddress==='subiao'">苏标</span>
						<span v-if="scope.row.carowneraddress==='yuebiao'">粤标</span>
						<span v-if="scope.row.carowneraddress==='chuanbiao'">川标</span>
						<span v-if="scope.row.carowneraddress==='yubiao'">渝标</span>
						<span v-if="scope.row.carowneraddress===null"></span>
					</template>
				</el-table-column>
				<el-table-column prop="zhongduanchangshang" label="终端厂商" width="100" header-align="center">
				</el-table-column>
				<el-table-column prop="videochannelnum" label="视频通道数" width="100" header-align="center" />
				<el-table-column prop="chezhu" label="车主" width="100" header-align="center" />
				<el-table-column prop="chezhudianhua" label="车主电话" width="200" header-align="center" />
				<el-table-column prop="ruhushijian" label="服务开始时间" width="200" header-align="center" />
				<el-table-column prop="guohushijian" label="服务结束时间" width="200" header-align="center" />
				<el-table-column prop="baoxiandaoqishijian" label="保险到期时间" width="200" header-align="center" />
				<el-table-column prop="xiacinianjianriqi" label="年检到期时间" width="200" header-align="center" />

				<el-table-column prop="gpsanzhuangshijian" label="安装时间" width="200" header-align="center" />
				<el-table-column prop="createtime" label="创建时间" width="200" header-align="center">
					<template slot-scope="scope">
						<span>{{$formatDate(scope.row.createtime)}}</span>
					</template>
				</el-table-column>


			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="searchParam.page" :page-sizes="[20,100, 200, 300, 400]" :page-size="searchParam.size"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<el-dialog :title="dialog.title" v-if="dialog.show" :visible.sync="dialog.show" width="60%"
			:fullscreen="dialog.full" :close-on-click-modal="false" :show-close="false" class="clxx-dialog">
			<template slot="title">
				<div style="display: flex;">
					<div style="width: 50%;">
						<span>{{dialog.title}}</span>
					</div>
					<div style="width: 50%;display: flex;justify-content: end;">
						<i class="el-icon-full-screen" style="margin-right: 5px;color: gray;" @click="dialogFull" />
						<i class="el-icon-close" @click="dialog.show=false" />
					</div>
				</div>
			</template>
			<clxx-dialog :full.sync="dialog.full" :curRow.sync="curRow" :status.sync="status" @on-save="onSave" />
		</el-dialog>


	</div>
</template>

<script>
	import clxxDialog from './dialog/clxx-dialog.vue'

	import {
		getVehList
	} from '@/api/user.js'

	import {
		delVeh
	} from '@/api/clgl.js'

	export default {
		components: {
			'clxx-dialog': clxxDialog
		},

		data() {

			return {
				status: 'edit',
				dialog: {
					show: false,
					title: '添加车辆',
					full: false
				},
				loading: false,
				searchParam: {
					deptName: null,
					cheliangpaizhao: null,
					zongduanid: null,
					page: 1,
					size: 20
				},
				tableData: [],
				total: 0,
				curRow: null
			}
		},


		methods: {
			removeEmptyValues(obj) {
				for (const key in obj) {
					if (obj[key] === null || obj[key] === undefined) {
						delete obj[key];
					} else if (typeof obj[key] === 'object' && Object.keys(obj[key]).length === 0) {
						delete obj[key];
					}
				}
				return obj;
			},
			delCl() {
				if (this.curRow) {
					var param = JSON.parse(JSON.stringify(this.curRow))
					delete param['caozuoshijian']
					delete param['createtime']
					delete param['gpstime']
					delete param['tongbushijian']
					this.$confirm('此操作将永久删除该车辆, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						delVeh(param).then(res=>{
							if(res.code===200){
								this.searchParam.page = 1
								this.refreshList()
							}
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});

				}
			},
			onSave() {
				this.dialog.full = false
				this.dialog.show = false
				this.curRow = null
				this.search()
			},
			dialogFull() {
				if (this.dialog.full) {
					this.dialog.full = false
				} else {
					this.dialog.full = true
				}
			},
			addCl() {
				this.status = 'add'
				this.dialog.title = '添加车辆'
				this.dialog.show = true
				this.dialog.full = false
				this.curRow = null
			},
			editCl() {
				if (this.curRow) {
					this.status = 'edit'
					this.dialog.title = '编辑车辆'
					this.dialog.show = true
					this.dialog.full = false
				}

			},
			search() {
				this.searchParam.page = 1
				this.refreshList()
			},
			handleCurrentChange(val) {
				this.searchParam.page = val
				this.refreshList()
			},
			handleSizeChange(val) {
				this.searchParam.size = val
				this.refreshList()
			},

			selectRow(row, column, event) {
				this.curRow = row
			},

			refreshList() {
				this.loading = true
				getVehList(this.searchParam).then(res => {
					if (res.code === 200) {
						this.tableData = res.data.data
						this.total = res.data.total
						this.loading = false
					}
				})
			}
		},

		mounted() {
			this.refreshList()
		}
	}
</script>

<style lang="scss">
	.clxx-dialog {
		.el-dialog__header {
			padding: 5px;
		}
	}
</style>